<template>
  <!-- 委托页面 -->
  <div class="record-page">
    <div class="record-header">
      <ul class="tabs">
        <li class="nav-bar" :class="isRecord=='new'?'active':''" @click="isRecordCut('new')">当前委托</li>
        <li class="nav-bar"
        :class="isRecord=='history'?'active':''"
        @click="isRecordCut('history')">历史委托</li>
      </ul>
      <div class="floatt-right">
        <span class="select-dowen">
          普通委托
          <i class="el-icon-caret-bottom icon"></i>
          <ul class="nav-list">
            <li class="list">普通委托</li>
            <li class="list">高级限价委托</li>
            <li class="list">止盈止损</li>
            <li class="list">跟踪委托</li>
            <li class="list">~~~~委托</li>
            <li class="list">***委托</li>
          </ul>
        </span>
        <span class="silcer">|</span>

        <span class="batch-cancel-order">批量撤单</span>
      </div>
    </div>
    <div class="record-body">
      <div class="type-header">
        <div class="list-col time">委托时间</div>
        <div class="list-col pair">交易对</div>
        <div class="list-col direction">方向</div>
        <div class="list-col ratio">成交比例</div>
        <div class="list-col count">已成交量&nbsp;|&nbsp;委托总量</div>
        <div class="list-col price">成交均价&nbsp;|&nbsp;委托价</div>
        <div class="list-col status">状态</div>
        <div class="list-col handle">操作</div>
      </div>
      <GeminiScrollbar class="table-body">
        <RecordList v-for="(item,index) in  dataList" :key="index" :item="item"></RecordList>
      </GeminiScrollbar>
      

    </div>
  </div>
</template>

<script>
import RecordList from "./list-record";
export default {
  data() {
    return {
      isRecord:"new",//new history
      dataList: [
        {
          CreateTime: "2019-9-14 13:24",
          PairId: 1,
          PairName: "BTC/USDT",
          Direction: 1, //1买，2，卖
          RatioTrade: "20%",
          RecordCount: 300, // 委托总量
          Traded: 20, //已成交
          TradedPrice: 0.5, //成交均价
          RecordPrice: 0.3, //成交均价|委托价
          Status: 1, //状态 1,交易中 2，撤单中 3，已撤单 4，交易完成
          StatusString: "已成交"
        },
        {
          CreateTime: "2019-9-14 13:24",
          PairId: 1,
          PairName: "BTC/USDT",
          Direction: 1, //1买，2，卖
          RatioTrade: "20%",
          RecordCount: 300, // 委托总量
          Traded: 20, //已成交
          TradedPrice: 0.5, //成交均价
          RecordPrice: 0.3, //成交均价|委托价
          Status: 4, //状态 1,交易中 2，撤单中 3，已撤单 4，交易完成
          StatusString: "已成交"
        },
        {
          CreateTime: "2019-9-14 13:24",
          PairId: 1,
          PairName: "BTC/USDT",
          Direction: 2, //1买，2，卖
          RatioTrade: "20%",
          RecordCount: 300, // 委托总量
          Traded: 20, //已成交
          TradedPrice: 0.5, //成交均价
          RecordPrice: 0.3, //成交均价|委托价
          Status: 2, //状态 1,交易中 2，撤单中 3，已撤单 4，交易完成
          StatusString: "已成交"
        },
        {
          CreateTime: "2019-9-14 13:24",
          PairId: 1,
          PairName: "BTC/USDT",
          Direction: 1, //1买，2，卖
          RatioTrade: "20%",
          RecordCount: 300, // 委托总量
          Traded: 20, //已成交
          TradedPrice: 0.5, //成交均价
          RecordPrice: 0.3, //成交均价|委托价
          Status: 3, //状态 1,交易中 2，撤单中 3，已撤单 4，交易完成
          StatusString: "已成交"
        },
        {
          CreateTime: "2019-9-14 13:24",
          PairId: 1,
          PairName: "BTC/USDT",
          Direction: 1, //1买，2，卖
          RatioTrade: "20%",
          RecordCount: 300, // 委托总量
          Traded: 20, //已成交
          TradedPrice: 0.5, //成交均价
          RecordPrice: 0.3, //成交均价|委托价
          Status: 3, //状态 1,交易中 2，撤单中 3，已撤单 4，交易完成
          StatusString: "已成交"
        },
      ]
    };
  },
  components: {
    RecordList
  },
  computed: {},

  watch: {},

  methods: {
    isRecordCut(val){
      this.isRecord=val;
    }
  },

  created() {},

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}
.record-header {
  display: flex;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  background-color: #05193d;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.3);
  .active {
    color: #fff;
    background-color: #1c283e;
  }
  .nav-bar {
    display: inline-block;
    height: 28px;
    padding: 0 15px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    font-size: 14px;
  }
  .floatt-right {
    font-size: 12px;
    .select-dowen {
      width: 75px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      .icon {
        margin-left: 5px;
        transition: all 0.3s;
      }
    }
    .select-dowen:hover {
      .icon {
        transform: rotate(180deg);
      }
      .nav-list {
        height: auto;
      }
    }
    .nav-list {
      position: absolute;
      bottom: 32px;
      right: 0;
      background: #1b3157;
      color: hsla(0, 0%, 100%, 0.65);
      border-radius: 4px;
      overflow: hidden;
      height: 0;
      .list {
        padding: 0 10px;
        text-align: right;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        cursor: pointer;
      }
      .list:hover {
        background-color: #334564;
      }
    }
    .silcer {
      padding: 0 5px;
      line-height: 21px;
      position: relative;
      top: -1px;
      color: #182534;
    }
    .batch-cancel-order {
      color: hsla(0, 0%, 100%, 0.15);
      line-height: 22px;
      padding: 0 12px;

      border: 1px solid #182534;
      border-radius: 2px;
      cursor: pointer;
      display: inline-block;
      margin: 0 10px;
    }
  }
}
.record-body {
  height: 185px;
  background-color: #05193d;
  font-size: 12px;
  padding: 10px 0;

  .type-header {
    display: flex;
    width: 100%;
    padding:0 12px 9px 15px;
    border-bottom: solid 0.5px hsla(0, 8%, 41%, 0.8);
  }
  .table-body {
    height: 135px;
    overflow-y: scroll;
  }
  .list-col,
  .table-body /deep/ .list-col {
    line-height: 28px;
    color: hsla(0, 0%, 100%, 0.8);
  }
  .time,
  .ratio,
  .table-body /deep/ .time,
  .table-body /deep/ .ratio {
    width: 13%;
  }
  .pair,
  .direction,
  .status,
  .handle,
  .table-body /deep/ .pair,
  .table-body /deep/ .direction,
  .table-body /deep/ .status,
  .table-body /deep/ .handle {
    width: 10%;
  }
  .count,
  .price,
  .table-body /deep/ .count,
  .table-body /deep/ .price {
    width: 17%;
  }
  .status,
  .table-body /deep/ .status {
    text-align: center;
  }
  .handle,
  .table-body /deep/ .handle {
    text-align: right;
  }
}
</style>